<template>
  <div id="emoticon">
    <div class="content">
      <div
        class="items"
        v-for="(item, index) in allEmoji"
        :key="index"
        @click="sendEmoji(item.href)"
      >
        <svg class="icon" aria-hidden="true">
          <use :xlink:href="item.href"></use>
        </svg>
        <div class="title">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Emoticon',
    props: ['sendWebSocketMsg'],
    data() {
      return {
        //表情包数组
        allEmoji: [

          {
            name: '天使',
            href: '#icon--angel'
          },
          {
            name: '魔鬼',
            href: '#icon--devil'
          },
          {
            name: '酷',
            href: '#icon--cool'
          },
          {
            name: '迷茫',
            href: '#icon--confused'
          },
          {
            name: '生气',
            href: '#icon--angry'
          },
          {
            name: '歪嘴笑',
            href: '#icon--cool-'
          },
          {
            name: '头晕',
            href: '#icon--dizzy'
          },

          {
            name: '大哭',
            href: '#icon--cry'
          },
          {
            name: '流泪',
            href: '#icon--cry-'
          },
          {
            name: '无语',
            href: '#icon--expressionless'
          },
          {
            name: '震惊',
            href: '#icon--flushed'
          },
          {
            name: '害怕',
            href: '#icon--scared'
          },
          {
            name: '惊恐',
            href: '#icon--shocked'
          },
          {
            name: '微笑',
            href: '#icon--smile'
          },
          {
            name: '可爱',
            href: '#icon--happy-'
          },
          {
            name: '露齿笑',
            href: '#icon--happy-1'
          },
          {
            name: '开心',
            href: '#icon--happy'
          },
          {
            name: '快乐',
            href: '#icon--smile-'
          },
          {
            name: '笑哭',
            href: '#icon--joy'
          },
          {
            name: '奸笑',
            href: '#icon--smirking'
          },
          {
            name: '流汗笑',
            href: '#icon--smiling-'
          },
          {
            name: '喜欢',
            href: '#icon--in-love'
          },
          {
            name: '亲亲',
            href: '#icon--kiss'
          },
          {
            name: '飞吻',
            href: '#icon--kiss-'
          },
          {
            name: '中毒',
            href: '#icon--astonished'
          },
          {
            name: '受伤',
            href: '#icon--injury'
          },
          {
            name: '生病',
            href: '#icon--sick'
          },
          {
            name: '口罩',
            href: '#icon--mask'
          },
          {
            name: '面无表情',
            href: '#icon--neutral'
          },
          {
            name: '闭嘴',
            href: '#icon--secret'
          },
          {
            name: '静音',
            href: '#icon--mute'
          },
          {
            name: '难过',
            href: '#icon--sad'
          },
          {
            name: '沮丧',
            href: '#icon--sad-'
          },
          {
            name: '面无血色',
            href: '#icon--scared-'
          },
          {
            name: '睡觉',
            href: '#icon--sleeping'
          },
          {
            name: '星星眼',
            href: '#icon--smiling'
          },
          {
            name: '流汗',
            href: '#icon--sweat'
          },
          {
            name: '哦?',
            href: '#icon--surprised'
          },
          {
            name: '白眼',
            href: '#icon--thinking'
          },
          {
            name: '鄙视',
            href: '#icon--unamused'
          },
          {
            name: '抓狂',
            href: '#icon--tired'
          },
          {
            name: '狗带',
            href: '#icon--astonished-'
          },
          {
            name: '调皮',
            href: '#icon--tongue'
          },
          {
            name: '舔',
            href: '#icon--tongue-'
          },
          {
            name: '舔乐了',
            href: '#icon--tongue-1'
          },
          {
            name: 'Wink',
            href: '#icon--wink'
          },
          {
            name: '呕吐',
            href: '#icon--vomiting'
          },
          {
            name: '僵尸',
            href: '#icon--zombie'
          },
          {
            name: '流口水',
            href: '#icon--vomiting-'
          },
        ],
      }
    },
    methods: {
      //鼠标点击表情包发送表情
      sendEmoji(emoji) {
        let msg = `<svg class="icon" aria-hidden="true" style="font-size:32px;color:#000"><use xlink:href=${emoji}></use></svg>`
        this.sendWebSocketMsg(msg)
      }
    },
  }
</script>

<style scoped>
  #emoticon {
    position: absolute;
    bottom: 40px;
    right: -9px;
    border: 3mm ridge rgba(47, 49, 54);
    border-radius: 5px;
    overflow: hidden;
  }

  /* 表情 */
  #emoticon .content {
    display: flex;
    flex-wrap: wrap;
    width: 360px;
    height: 240px;
    background-color: #40444b;
    overflow: auto;
  }
  /* 滚动条样式 */
  .content::-webkit-scrollbar {
    width: 5px;
    /* height: 4px; */
  }
  .content::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #ccc;
  }

  .items svg {
    width: 32px;
    height: 32px;
    padding: 9px 9px 0 9px;
  }

  /* 表情标题 */
  .items .title {
    width: 100%;
    text-align: center;
    font-size: 8px;
    color: #ccc;
  }
</style>